<!--
-->
<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(560)" :min-width="layout.modalMinWidth(600)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(700)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="120px">
            <el-form-item :style="layout.col1" label="所属程序" prop="programId">
                <el-select v-model="state.model.programId" @change="onProgramChange" style="width: 100%" filterable>
                    <el-option v-for="item in state.programList" :key="item.id" :value="item.id" :label="item.name"/>
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col1" label="配置文件类型" prop="configType">
                <el-radio-group v-model="state.model.configType">
                    <el-radio-button :value="1">appsettings</el-radio-button>
                    <el-radio-button :value="2">systemconfig</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item :style="layout.col1" label="Key" prop="key">
                <el-input v-model="state.model.key" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="描述" prop="description">
                <el-input v-model="state.model.description" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="数据类型" prop="valueType">
                <el-radio-group v-model="state.model.valueType" @change="state.model.value = null">
                    <el-radio :value="1">字符串</el-radio>
                    <el-radio :value="2">bool</el-radio>
                    <el-radio :value="3">int</el-radio>
                    <el-radio :value="4">float</el-radio>
                    <el-radio :value="5">时间</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="state.model.valueType === 1" :style="layout.col1" label="value" prop="默认值">
                <el-input v-model="state.model.value" />
            </el-form-item>
            <el-form-item v-if="state.model.valueType === 2" :style="layout.col1" label="value" prop="默认值">
                <el-radio-group v-model="state.model.value">
                    <el-radio value="false">false</el-radio>
                    <el-radio value="true">true</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="state.model.valueType === 3" :style="layout.col1" label="value" prop="默认值">
                <el-input-number v-model="state.model.value" controls-position="right" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-if="state.model.valueType === 4" :style="layout.col1" label="value" prop="默认值">
                <el-input-number v-model="state.model.value" controls-position="right" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-if="state.model.valueType === 5" :style="layout.col1" label="value" prop="默认值">
                <el-date-picker v-model="state.model.value" format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" />
            </el-form-item>

            <el-form-item :style="layout.col1" label="开始版本" prop="startVersion">
                <el-select v-model="state.model.startVersion" placeholder="0.0.0"  style="width: 100%" filterable clearable>
                    <el-option v-for="item in state.versionList" :key="item.id" :value="item.versionNum" :label="item.versionNum"/>
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col1" label="结束版本" prop="endVersion">
                <el-select v-model="state.model.endVersion" placeholder="0.0.0" style="width: 100%" filterable clearable>
                    <el-option v-for="item in state.versionList" :key="item.id" :value="item.versionNum" :label="item.versionNum"/>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {
        configType: 1,
        valueType: 1,
        endVersion: null
    }
}

// 校验规则
const rules = computed(() => {
    return {
        programId: [{required: true, message: "请设置所属程序"}],
        key: [{required: true, message: "请输入配置项 Key"}],
        value: [{required: true, message: "请设置默认值"}],
        description: [{required: true, message: "请设置描述"}],
        startVersion: [{required: true, message: "请输入开始版本"}],
    }
})

// 自定义校验规则
const customRules = {
    // pid: (rule, value, callback) => {
    //     if (state.model.type > 0) {
    //         if (!value) return callback(new Error("请选择上级菜单"));
    //     }
    //     return true;
    // },
};


async function onProgramChange() {
    const {data} = await api.GetVersionList({programId: state.model.programId});
    state.versionList = data || []
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据
    api.GetProgramList({}).then(res => {
        state.programList = res.data || [];
    })
    // 初始化数据
    if (state.model.id) {
        // 字符串
        if (state.model.valueType === 1) { }
        // bool
        if (state.model.valueType === 2) { }
        // int
        if (state.model.valueType === 3) {
            state.model.value = parseInt(state.model.value)
        }
        // float
        if (state.model.valueType === 4) {
            state.model.value = parseFloat(state.model.value)
        }
        // 时间
        if (state.model.valueType === 5) {}
    }
}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {...state.model}
    if (body.value !== null && body.value !== undefined) {
        // 字符串
        if (body.valueType === 1) {}
        // bool
        if (body.valueType === 2) {
            body.value += ""
        }
        // int
        if (body.valueType === 3) {
            body.value = parseInt(body.value)
        }
        // float
        if (body.valueType === 4) {
            body.value = parseFloat(body.value)
        }
        // 时间
        if (body.valueType === 5) {}
    }
    const {success, data} = await api[state.model.id ? 'UpdateProgramConfig' : 'AddProgramConfig'](body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
</style>
